<template>
  <div>
    <p style="font-size:25px;margin-right:50px">角色列表</p>
    <el-table v-loading="loading" :data="roleData" style="margin-bottom: 20px;" border size="mini">
      <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
      <el-table-column label="角色名称" prop="name" width="200px" align="center" />
      <el-table-column label="角色描述" prop="description" width="400px" align="center"></el-table-column>
      <el-table-column label="状态" prop="status" width="120px" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 'y'">正常</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300px" align="center">
        <template slot="header">
          <strong>操作</strong>
          <el-button style="margin-left:50px" plain size="mini" type="primary" @click="addRole">增加</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="title"
      :visible.sync="showUpdateRole"
      width="40%"
      @close="clear"
      v-loading="dialogLoading"
    >
      <el-form :model="roleVo">
        <el-form-item label="角色名称" label-width="130px">
          <el-input v-model="roleVo.role.name" style="width:240px"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" label-width="130px">
          <el-input v-model="roleVo.role.description" style="width:240px"></el-input>
        </el-form-item>
        <el-form-item label="角色状态" label-width="130px">
          <el-radio v-model="roleVo.role.status" label="y">正常</el-radio>
          <el-radio v-model="roleVo.role.status" label="n">禁用</el-radio>
        </el-form-item>
        <el-form-item label="角色权限" label-width="130px">
          <el-tree
            :data="menPermData"
            show-checkbox
            node-key="id"
            ref="menuPermTree"
            :props="treePorps"
          >
            <span slot-scope="{ node ,data}">
              <span style="margin-right:5px;">{{ node.label }}</span>
              <el-tag size="mini" type="danger" v-if="data.menuType == 'm'">菜单</el-tag>
              <el-tag size="mini" type="success" v-else-if="data.menuType == 'c'">目录</el-tag>
              <el-tag size="mini" type="warning" v-else-if="data.menuType == 'f'">权限</el-tag>
            </span>
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clear">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      roleData: [],
      menPermData: [],
      loading: true,
      treePorps: {
        label: "menuName",
      },
      showUpdateRole: false,
      roleVo: {
        role: {
          id: "",
          name: "",
          description: "",
          status: "",
        },
        menuPermIds: [],
      },
      title: "",
      alterIndex: -1,
      dialogLoading: false,
    };
  },
  created() {
    this.getData();
    this.getPemrData();
  },
  methods: {
    getData() {
      this.loading = true;
      this.$axios.post("/role/list").then((r) => {
        if (r.data.code == 200) {
          this.roleData = r.data.data;
          this.loading = false;
        }
      });
    },
    getPemrData() {
      this.$axios.post("/role/menuPerm/list").then((r) => {
        if (r.data.code == 200) {
          let menuPermList = r.data.data;
          let dataM = [];
          for (const menuPerm of menuPermList) {
            if (menuPerm.menuType == "m") {
              dataM.push(menuPerm);
            }
          }
          dataM.sort((a, b) => {
            return a.orderNum - b.orderNum;
          });
          this.wrapMenuPermData(dataM, menuPermList);
          this.menPermData = dataM;
        }
      });
    },
    wrapMenuPermData(dataM, menuPermList) {
      for (const perm of dataM) {
        let sonPerm = [];
        for (const p of menuPermList) {
          if (p.parentId == perm.id) {
            sonPerm.push(p);
          }
        }
        this.wrapMenuPermData(sonPerm, menuPermList);
        sonPerm.sort((a, b) => {
          return a.orderNum - b.orderNum;
        });
        perm.children = sonPerm;
      }
    },
    handleEdit(index, row) {
      this.showUpdateRole = true;
      this.title = "修改角色";
      this.alterIndex = index;
      this.$axios.post("/role/getPermByRoleId?roleId=" + row.id).then((r) => {
        if (r.data.code == 200) {
          this.roleVo.role = { ...row };
          let menuPermIds = [];
          for (const menuPerm of r.data.data) {
            if (menuPerm.menuType == "f") {
              menuPermIds.push(menuPerm.id);
            }
          }
          this.$refs.menuPermTree.setCheckedKeys(menuPermIds);
        }
      });
    },
    submit() {
      this.dialogLoading = true;
      this.roleVo.menuPermIds = this.$refs.menuPermTree
        .getCheckedKeys()
        .concat(this.$refs.menuPermTree.getHalfCheckedKeys());
      if (this.alterIndex != -1) {
        this.$axios.post("/role/update", this.roleVo).then((r) => {
          if (r.data.code == 200) {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.roleData[this.alterIndex].name = this.roleVo.role.name;
            this.roleData[this.alterIndex].description =
              this.roleVo.role.description;
            this.roleData[this.alterIndex].status = this.roleVo.role.status;
            this.clear();
          }
        });
      } else {
        this.$axios.post("/role/add", this.roleVo).then((r) => {
          if (r.data.code == 200) {
            this.$message({
              type: "success",
              message: "增加成功!",
            });
            this.roleVo.role.id = r.data.data;
            this.roleData.push(this.roleVo.role);
            this.clear();
          }
        });
      }
      this.dialogLoading = false;
    },
    clear() {
      this.showUpdateRole = false;
      this.roleVo = {
        role: {
          id: "",
          name: "",
          description: "",
          status: "",
        },
        menuPermIds: [],
      };
      this.alterIndex = -1;
      this.$refs.menuPermTree.setCheckedKeys([]);
    },
    addRole() {
      this.showUpdateRole = true;
      this.title = "增加角色";
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.post("/role/delete?roleId=" + row.id).then((r) => {
            if (r.data.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>